<template>
  <div id="seteventdetails">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>模块类型</legend>
      <div class="layui-field-box">
        <el-radio-group v-model="radio" @change="changetype">
          <el-radio-button label="显示标题"></el-radio-button>
          <el-radio-button label="不显示标题"></el-radio-button>
        </el-radio-group>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>模块标题</legend>
      <div class="layui-field-box">
        <el-input v-model="moddata[index].config.title" placeholder="请输入模块标题"></el-input>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>字体颜色</legend>
      <div class="layui-field-box">
        <el-color-picker v-model="color2" @change="changefc"></el-color-picker>
      </div>
    </fieldset>
    <el-button @click="save" type="primary">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
</template>

<script>
  export default {
    props: ["moddata", "index"],
    data: function () {
      return {
        input: this.moddata[this.index].config.title,
        radio: this.moddata[this.index].config.titleshow ? "显示标题" : "不显示标题",
        color1: '',
        color2: this.moddata[this.index].config.fontcolor
      }
    },
    methods: {
      changetype: function () {
        if (this.radio == "显示标题") {
          this.moddata[this.index].config.titleshow = true;
        } else if (this.radio == "不显示标题") {
          this.moddata[this.index].config.titleshow = false;
        }
      },
      changefc: function () {
        this.moddata[this.index].config.fontcolor = this.color2
      },
      cancel: function () {
        this.$emit('setdone', 2);
      },
      save: function () {
        this.$emit('setdone', 1);
      }
    }
  }
</script>

<style>

</style>